<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中示例</title>
<style>
    html, body {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;    /* 竖直居中 */
        font-family: Arial, sans-serif;
    }

    .centered-container {
        text-align: left; /* 可选：让容器内的内容左对齐 */
    }

    .dropdown-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px; /* 可选：为容器添加一些内边距 */
        border: 1px solid #ccc; /* 可选：为容器添加边框以更好地显示其位置 */
        border-radius: 5px; /* 可选：为容器添加圆角 */
        background-color: #fff; /* 可选：设置容器背景色 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：为容器添加阴影 */
    }

    .dropdown {
        margin-bottom: 10px;
    }

    label {
        margin-right: 10px;
        font-weight: bold;
    }

    select {
        padding: 5px;
        font-size: 16px;
        width: 200px; /* 可以根据需要调整宽度 */
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="centered-container">
    <div class="dropdown-container">
        <div class="dropdown">
            <label for="juShi">局时:</label>
            <select id="juShi">
                <option value="10">10分钟</option>
                <option value="15">15分钟</option>
                <option value="20">20分钟</option>
                <option value="25">25分钟</option>
                <option value="30">30分钟</option>
            </select>
        </div>
        <div class="dropdown">
            <label for="buShi">步时:</label>
            <select id="buShi">
                <option value="30">30秒</option>
                <option value="45">45秒</option>
                <option value="60">1分钟</option>
                <option value="90">1分30秒</option>
                <option value="120">2分钟</option>
            </select>
        </div>
        <div class="dropdown">
            <label for="woFang">我方:</label>
            <select id="woFang">
                <option value="red">执红</option>
                <option value="black">执黑</option>
            </select>
        </div>
        <button id="confirmButton">确定</button>
    </div>
</div>
</body>

<script>
document.getElementById('confirmButton').addEventListener('click', function() {
     var juShiValue = document.getElementById('juShi').value;
     var buShiValue = document.getElementById('buShi').value;
     var woFangValue = document.getElementById('woFang').value;
// 构建查询字符串
    var queryString = `?juShi=${juShiValue}&buShi=${buShiValue}&woFang=${woFangValue}`;
	console.log(queryString);
    // 设置要跳转到的页面的URL（这里假设是target.html）
    var targetUrl = "index.html" + queryString;
    // 跳转到带有查询参数的页面
    window.location.href = targetUrl;
});
</script>

</html>


















